import { mapGetters } from 'vuex'
import image from '@/assets/images/item.png'
import DefaultBg from '@/assets/images/bg.jpg'
import Logo from '@/assets/images/logo2.png'
import { getToken } from '@/utils/auth'
import { requestGet } from '@/api/system/common'
import FooterLogo from '@/assets/images/logo.png'
/**
 *  门户布局相关方法
 */
export const layout = {
  props: {
    temp: {
      type: Object,
      default() {
        return {}
      }
    },
    showHeader: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 布局相关信息
      layoutTheme: {
        /* 整体设置 */
        // 背景图片
        image: image,
        // 背景色
        backgroundColor: '#ffffff',
        // 图片是否重复
        repeat: 'repeat',
        // 默认字体大小
        fontSize: '16px',
        // 默认字体色
        color: '#000000',
        // 辅助字体色
        assistColor: '#909399',
        // 通用边框色
        borderColor: '#a8abb2',
        // 边框圆角
        borderRadius: '4px',
        /* 顶栏 */
        // 顶栏文字色
        headerBarTabColor: '#ffffff',
        // 顶端Tab激活背景色
        headerBarTabActiveBackground: '#ffffff',
        // 顶端Tab激活颜色
        headerBarTabActiveColor: '#000000',
        // 顶端背景色
        headerBarBackground: '#0315d2',
        // 顶端Tab hover 背景色
        headerBarHoverBackground: '#ffffff',
        // 顶端查询框背景色
        headerQueryBackground: '#ffffff',
        // 顶端 查询按钮背景色
        headerQueryButtonBackground: '#0315d2',
        // 顶端 查询按钮字体色
        headerQueryButtonColor: '#ffffff',
        // 顶端 查询框辅助字体色
        headerQueryAssistColor: '#E4E7ED',
        // 顶端 背景图
        headerBackGroundImage: DefaultBg,
        // 顶端 Logo
        headerLogo: Logo,
        /* 栏目 */
        // 背景色
        menuBackground: '#ffffff',
        // 字体颜色
        menuColor: '#303133',
        // 激活背景色
        menuActiveBackground: '#ffffff',
        // 激活字体颜色
        menuActiveColor: '#409eff',
        // 标题栏背景色
        menuTopBarBackground: '#ffffff',
        // 标题栏字体色
        menuTopBarColor: '#303133',
        // 栏目常用边框颜色
        menuBorderColor: '#EBEEF5',
        /*  lab */
        labelColor: '#303133',
        labelBackground: '#ffffff',
        labelActiveColor: '#ffffff',
        labelActiveBackground: '#409eff',
        // 页脚设置
        footerBackgroundColor: '#0315d2',
        // 页脚字体颜色
        footerFontColor: '#E4E7ED',
        // 页脚图标
        footerLogo: FooterLogo,
        // 弹框背景色
        dialogBackgroundColor: '',
        dialogActiveColor: '#409eff',
        dialogActiveBack: '#edf1ff'
      }
    }
  },
  computed: {
    ...mapGetters(['theme']),
    headerFontColor() {
      /* if (this.theme) {
        return { '--header-font-color': this.theme.columnTitleFontColor }
      } else {
        return { '--header-font-color': this.layoutTheme.menuTopBarColor }
      }*/
      return { '--header-font-color': this.layoutTheme.menuTopBarColor }
    },
    contentBackGround() {
      /* if (this.theme) {
        return { '--header-font-color': this.theme.columnGroundColor }
      } else {
        return { '--header-font-color': this.layoutTheme.menuTopBarBackground }
      }*/
      return { '--header-font-color': this.layoutTheme.menuTopBarBackground }
    },
    activeColor() {
      /* if (this.theme) {
        return { '--active-color': this.theme.fontColor, '--active-back': this.theme.columnGroundColor }
      } else {
        return { '--active-color': this.layoutTheme.dialogActiveColor, '--active-back': this.layoutTheme.dialogActiveBack }
      }*/
      return { '--active-color': this.layoutTheme.dialogActiveColor, '--active-back': this.layoutTheme.dialogActiveBack }
    },
    assistColor() {
      /* if (this.theme) {
        return {
          '--assist-color': this.theme.assistColor
        }
      } else {
        return {
          '--assist-color': this.layoutTheme.assistColor
        }
      }*/
      return {
        '--assist-color': this.layoutTheme.assistColor
      }
    }
  },
  watch: {
    // 监听主题数据的变化, 用户用户切换主题时，主题没有发生改变
    theme(data) {

    }
  },
  methods: {
    openLayoutMore() {
      const entity = {
        id: this.temp.data.id,
        name: this.temp.lmmc, // 栏目名称
        dkfs: this.temp.dkfs, // 打开方式
        url: this.temp.path, // 打开地址
        parentId: this.temp.column ? this.temp.column.menu.id : this.temp.columnId, // 父节点编号
        parentName: this.temp.column ? this.temp.column.menu.name : '', // 父节点名称
        isLiveBos: this.temp.isLiveBos // 是否是livebos
      }
      this.$bus.emit('openMore', entity)
    }
  }
}

// tabs 头部
export const header = {
  props: {
    temp: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      tabsColumn: [], // 用户存储tabs模版配置信息
      tabsTemp: {}, // 详情模版配置信息
      activeTemp: null, // 当前启用的模版，用户tabs
      template: null, // tabs 列表模版
      active: 0, // 记录当前选择项
      isMore: false // 是否显示更多
    }
  },
  watch: {
    temp: {
      handler(newData) {
        if (this.showHeader === true) {
          const pzx = JSON.parse(newData.data.pzx)
          this.tabsColumn = pzx.tabsData
          this.activeTemp = this.tabsColumn[this.active].temp
        } else {
          const pzx = JSON.parse(newData.pzx)
          this.tabsColumn = pzx.tabsData
          this.activeTemp = this.tabsColumn[this.active].temp
        }
        this.initEntity()
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    // 初始化tabs 数据
    initEntity() {
      if (this.activeTemp !== null) {
        let url = 'rest/api/guest/temp/v2/column/analysis/one'
        if (getToken()) {
          url = 'rest/api/temp/v1/column/manager/one'
        }
        requestGet(url, { id: this.activeTemp }).then(res => {
          const { data } = res
          const path = data.mbdl + '/' + data.mbfl + '/' + data.mb
          this.template = () => import(`@/template/${path}`)
          this.tabsTemp = data
          this.isMore = this.tabsColumn[this.active].isMore
          this.tabsTemp.dkfs = this.tabsColumn[this.active].dkfs
          this.tabsTemp.path = this.tabsColumn[this.active].path
          this.tabsTemp.showHeader = true
          this.tabsTemp.menuId = this.temp.column ? this.temp.column.menu.id : this.temp.columnId
          this.tabsTemp.menuName = this.temp.column ? this.temp.column.menu.name : ''
          this.tabsTemp.columnName = this.tabsColumn[this.active].label
          this.$emit('callback', { component: this.template, temp: this.tabsTemp })
        })
      }
    },
    // 标题点击事件
    headerClick(item, index) {
      this.active = index
      this.activeTemp = item.temp
      this.initEntity()
    },
    // 点击更多
    openMore() {
      const entity = {
        id: this.activeTemp, // 当前模版编号
        name: this.tabsTemp.columnName, // 栏目名称
        dkfs: this.tabsTemp.dkfs, // 打开方式
        parentId: this.tabsTemp.menuId, // 父节点编号
        url: this.tabsTemp.path, // 打开地址
        parentName: this.tabsTemp.menuName, // 父节点名称
        isLiveBos: this.temp.isLiveBos // 是否是livebos
      }
      this.$bus.emit('openMore', entity)
    }
  }
}
